<template>
    <div class="recommend-order-card">
        <div class="clearfix good-info after-line">
            <block v-if="detailIsArr">
                <div v-for="(item, index) in detailArr" :key="index" class="good-item">
                    <div class="single-line-left">
                        <div class="cover" :style="{'background-image': 'url(' + item.order_cover + ')'}" ></div>
                    </div>
                    <div class="single-line-center-wrapper info-box overflow">
                        <div class="name hidden-text-v2 large-text">
                            {{item.good_name}}
                        </div>
                        <div class="price normal-text">
                            <span class="fl">
                                ￥{{item.price_text}}
                                <span class="grey-color">&times;{{item.number}}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </block>
            <block v-else>
                <div class="single-line-left">
                    <!-- <img class="cover" mode="aspectFill" :src="cover" /> -->
                    <div class="cover" :style="{'background-image': 'url(' + cover + ')'}" ></div>
                </div>
                <div class="single-line-center-wrapper info-box overflow">
                    <div class="name hidden-text-v2 large-text">
                        {{name}}
                    </div>
                    <div class="price normal-text">
                        <span class="fl">
                            {{priceCurrency}}
                            <span class="grey-color">&times;1</span>
                        </span>
                        <span class="fr">
                            实付金额：{{originalPriceCurrency}}
                        </span>
                    </div>
                </div>
            </block>
        </div>
        <div class="order-info normal-text">
            <div class="item">
                <div class="title">所属店铺</div>
                <div class="val">{{shop}}</div>
            </div>
            <div class="item">
                <div class="title">购买者信息</div>
                <div class="val">
                    {{buyer}}
                    <span v-if="mobile" class="roc__mobile fr" @click="makeCall(mobile)">
                        {{mobile}}
                        <div class="roc__mobile-inner">
                            <span class="roc__mobile-text">
                                <i class="icon">&#xe725;</i>
                                CALL
                            </span>
                        </div>
                    </span>
                </div>
            </div>
            <div class="item" v-if="detailIsArr">
                <div class="title">实付金额</div>
                <div class="val">{{originalPriceCurrency}}</div>
            </div>
            <div class="item">
                <div class="title">支付时间</div>
                <div class="val">{{formatCreatedAt}}</div>
            </div>
            <div class="item">
                <div class="title">订单状态</div>
                <div class="val" :class="[ orderStatusText === '已完成' ? 'color-blue' : 'color-red' ]">{{orderStatusText}}</div>
            </div>
            <div v-if="showRebateStatus" class="item">
                <div class="title">返利状态</div>
                <div class="val">
                    {{order.rebate_status || '暂无数据'}}
                    <span v-if="order.rebate_money" class="fr color-red">￥{{order.rebate_money | currency}}</span>
                </div>
            </div>
            <div class="item">
                <div class="title">订单ID</div>
                <div class="val">{{order.id}}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    currency,
    dateChinaFormat,
    getManageOrderStatus,
} from '@/lib/utils';

import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'OrderCard',
})
export default class OrderCard extends Vue {
    /** 套系id */
    @Prop({ type: Number }) public linkId: any;
    /** 订单商品类型 */
    @Prop({ type: String }) public goodType: any;
    /** 商品详情 */
    @Prop({ type: [ Array, Object ] }) public detail: any;
    /** 商品名称 */
    @Prop({ type: String }) public name: any;
    @Prop({ type: String }) public cover: any;
    /** 原价 */
    @Prop({ type: Number }) public originalPrice: any;
    /** 价格 */
    @Prop({ type: Number }) public price: any;
    @Prop({ type: Number }) public couponPay: any;
    @Prop({ type: Number, required: true }) public totalPrice: any;
    @Prop({ type: Number }) public count: any;
    /** 订单状态 */
    @Prop({ type: String }) public status: any;
    /** 是否已经签收 */
    @Prop({ type: Boolean }) public isComplete: any;
    @Prop({ type: Number }) public final: any;
    @Prop({ type: Number }) public buyerConfirm: any;
    @Prop({ type: Number }) public delivery: any;
    @Prop({ type: String }) public shop: any;
    @Prop({ type: String }) public createdAt: any;
    @Prop({ type: String }) public buyer: any;
    @Prop({ type: String }) public mobile: any;
    @Prop() public order: Order.Recommend;

    @Prop({ type: Boolean, default: true }) public showRebateStatus!: boolean;

    public get detailIsArr() {
        return Array.isArray(this.detail);
    }

    public get detailArr() {
        return this.detailIsArr ? this.detail.map((item: any) => {
            return {
                ...item,
                price_text: currency(item.price),
            };
        }) : [];
    }

    public get formatCreatedAt() {
        return this.createdAt ? dateChinaFormat(new Date(this.createdAt), 'Y.m.d H:i:s') : '';
    }

    /** 商品实际价格 */
    public get originalPriceCurrency() {
        return this.originalPrice ? '￥' + currency(this.originalPrice - Number(this.couponPay)) : '';
    }

    /** 价格 */
    public get priceCurrency() {
        return this.detail ? '￥' + currency(this.price) : '';
    }

    public get totalPriceCurrency() {
        return this.goodType === 'prepay' ? '￥' + currency(this.totalPrice) : '￥' + currency(Number(this.totalPrice) - Number(this.couponPay));
    }

    /** 订单状态文本 */
    public get orderStatusText() {
        return getManageOrderStatus(this.status, this.goodType, this.isComplete, this.final, this.delivery, this.buyerConfirm);
    }

    public makeCall(mobile: string) {
        wx.makePhoneCall({
            phoneNumber: mobile,
        });
    }
    public currency(price: any) {
        // console.log('currency', price);
        return currency(price);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.roc {
    &__mobile {
        position: relative;
        &-inner {
            position: absolute;
            right: 0;
            top: 100%;
            color: @color-white;
            .icon {
                display: inline-block;
                width: 22px;
                height: 22px;
                font-size: 16px;
                line-height: 22px;
                background-color: #bbbbbb;
                border-radius: 50%;
                text-align: center;
            }
        }
        &-text {
            position: relative;
            top: 4px;
            display: inline-block;
            padding-right: 4px;
            .text-small();
            background-color: #298DF8;
            border-radius: 12px;
        }
    }
}

.recommend-order-card {
    position: relative;
    width: 370px;
    margin: 12rpx auto;
    line-height: 20px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 1);
    .good-info {
        position: relative;
        padding: 10px 30rpx 16rpx;
        .cover {
            width: 144rpx;
            height: 144rpx;
            background: center no-repeat;
            background-size: cover;
            border-radius: 7px;
        }
        .info-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            height: 144rpx;
            padding: 10rpx;
            .name {
                line-height: 34rpx;
            }
        }
    }
    .good-item {
        padding: 5px 0;
    }
    .name,
    .price {
        padding-left: 16rpx;
    }
    .price {
        padding-top: 6rpx;
    }
    .order-info {
        padding: 10px;
        .item {
            display: flex;
            align-items: center;
            margin: 12rpx 0;
            .title {
                width: 200rpx;
            }
            .val {
                flex: 1;
            }
        }
    }
}

</style>
